<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="gird-header"  th:fragment="topbar">
    <div class="ui container">
        <div class="ui   menu ">
            <!--      <h2 class="ui olive header item" style="font-family: STSong"> </h2>-->
            <!--<div class="right m-item item m-mobile-hide">-->
            <!--      class="active m-item item m-mobile-hide"-->
            <button class=" ui inverted teal button  ">  <a th:href="@{/}" >  <i class="home icon"></i>   首页</a>  </button>
            <button class="ui inverted teal  button  ">  <a href="#" th:href="@{/types/-1}" class=" m-mobile-hide"><i class="clone outline icon"></i>分类</a> </button>
            <button class="ui inverted teal  button  ">  <a href="#" th:href="@{/music}" class="  m-mobile-hide"><i class="music icon"></i>音乐盒</a></button>
            <button class="ui inverted teal  button  ">   <a href="#" th:href="@{/message}" class="  m-mobile-hide"><i class="book icon"></i>留言板</a> </button>
            <button class="ui inverted teal  button  ">  <a href="#" th:href="@{/friends}" class="  m-mobile-hide"><i class="pencil alternate icon"></i>神秘屋</a> </button>
            <button class="ui inverted teal  button  ">   <a href="#" th:href="@{/picture}" class=" m-mobile-hide"><i class="image icon"></i>照片墙</a> </button>
            <button class="ui inverted teal  button  ">  <a href="#" th:href="@{/about}" class="  m-mobile-hide"><i class="info icon"></i>关于我</a> </button>
            <button class="ui inverted teal  button  ">  <a href="#" th:href="@{/function}" class="   m-mobile-hide"><i class="hand point up outline  icon"></i>功能页</a> </button>

            <!--</div>-->
            <div class=" m-item item m-mobile-hide s1">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon transparent input m-margin-tb-tiny " style="color: white;">
                        <input style="color: white" type="text" name="query" placeholder="Search...." th:value="${query}">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</div>



<footer class="segment m-padded-tb-massive m-opacity bg " th:fragment="sidebar">
    <div class="ui center aligned container bg2 ">
      <span>技术支持：zeh<br>
     欢迎来访！</span>
    </div>
</footer>

</body>
</html>
